<!--
 * @Author: your name
 * @Date: 2021-08-09 14:10:33
 * @LastEditTime: 2021-08-09 14:36:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day06\03-列表.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表样式</title>
    <style>
        .u3 {
            background-color: lightskyblue;
            /* 样式：没有样式，有序，无序 范围：大，小 */
            list-style-type: none;
            /* 列表项展示的地方是li外部 */
            list-style-position: outside;
        }
        .u3>li:nth-child(2) {
            list-style-type: decimal-leading-zero;
        }
        .u4 {
            /* 列表项展示的地方是li内部 */
            list-style-position: inside;
            
            background-color: mediumorchid;
        }
        .u4>li:nth-child(2){
            /* 如果图片与列表项形式同时出现，优先显示的是图片 */
            list-style-image: url();
            list-style-type: disc;

        }
        .u4>li:nth-child(4) {
            list-style: lower-roman url() inside;
        }
        .u4>li:nth-child(5){
            list-style:lower-roman;
        }
        .u6 {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ul type="circle">
        <li>首页</li>
        <li>订单</li>
        <li type="disc">收藏夹</li>
        <li>购物车</li>
    </ul>
    <ol type="I" start="5">
        <li>首页</li>
        <li>订单</li>
        <li type="a">收藏夹</li>
        <li>购物车</li>
    </0l>
    <ul class="u3">
        <li>首页</li>
        <li>订单</li>
        <li >收藏夹</li>
        <li>购物车</li>
    </ul>
    <ol class="u4">
        <li>首页</li>
        <li>订单</li>
        <li >收藏夹</li>
        <li>购物车</li>
        <li>地址</li>
    </0l>
    <ul class="u6">
        <li><img src="布丁(1).png" alt="">布丁</li>
    </ul>
</body>
</html>